<template>
  <div class="user">
    <el-form
      ref="ruleForm"
      :rules="rules"
      label-position="left"
      label-width="145px"
      :model="ruleForm"
    >
      <el-form-item label="公司名称：" prop="name">
        <el-input
          v-model="ruleForm.name"
          placeholder="请输入公司名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="公司性质：" prop="nature">
        <el-select v-model="ruleForm.nature" placeholder="请选择公司性质">
          <el-option
            v-for="item in companyNature"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="公司简称：" prop="subTitle">
        <el-input
          v-model="ruleForm.subTitle"
          placeholder="请输入公司简称"
        ></el-input>
      </el-form-item>
      <el-form-item label="专利数量：" prop="patentCount">
        <el-input
          v-model="ruleForm.patentCount"
          placeholder="请输入已有专利数量"
        ></el-input>
      </el-form-item>
      <el-form-item label="公司是否已上市：" prop="market">
        <el-radio v-model="ruleForm.market" label="1">是</el-radio>
        <el-radio v-model="ruleForm.market" label="0">否</el-radio>
      </el-form-item>
      <el-form-item label="是否有融资需求：" prop="needMoney">
        <el-radio v-model="ruleForm.needMoney" label="1">是</el-radio>
        <el-radio v-model="ruleForm.needMoney" label="0">否</el-radio>
      </el-form-item>
      <el-form-item label="选择地区" prop="city">
        <el-input
          @click.native="drawer = true"
          v-model="ruleForm.city"
          suffix-icon="el-icon-arrow-right"
          placeholder="省、市、区、街道"
        ></el-input>
      </el-form-item>
      <el-form-item label="公司办公地址：" prop="workAddress">
        <el-input
          v-model="ruleForm.workAddress"
          placeholder="请输入公司办公地址"
        ></el-input>
      </el-form-item>
    </el-form>

    <div class="divwrap" v-if="drawer">
      <v-distpicker
        type="mobile"
        @province="onChangeProvince1"
        @city="onChangeCity"
        @area="onChangeArea"
      ></v-distpicker>
    </div>
    <!--遮罩层-->
    <div class="blacks" v-if="drawer" @click="countermand"></div>
    <div class="btn">
      <el-button type="primary" @click="submit()">提交</el-button>
      <el-button type="primary" @click="resetForm()">重置</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions, mapMutations } from "vuex";
import VDistpicker from "v-distpicker";
export default {
  components: {
    VDistpicker,
  },
  data() {
    return {
      drawer: false,
      province: "",
      city: "",
      area: "",
      ruleForm: {
        name: "",
        subTitle: "",
        patentCount: "",
        city: "",
        nature: "",
        market: "",
        needMoney: "",
        registerAddress: "",
        workAddress: "",
        attribution: "",
      },
      rules: {
        name: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
        subTitle: [
          { required: true, message: "请输入公司简称", trigger: "blur" },
        ],
        patentCount: [
          { required: true, message: "请输入已有专利数量", trigger: "blur" },
        ],
        nature: [],
        city: [{ required: true, message: "请选择地区", trigger: "blur" }],
        market: [
          { required: true, message: "公司是否已上市", trigger: "blur" },
        ],
        needMoney: [
          { required: true, message: "是否有融资需求", trigger: "blur" },
        ],
      },
      imageUrl: "",
      myHeaders: {
        Accept: "application/json",
        Authorization: "Bearer  " + localStorage.getItem("token"),
      },
      sexArr: [
        {
          value: 1,
          label: "男",
        },
        {
          value: 2,
          label: "女",
        },
      ],
    };
  },
  mounted() {
    this.init();
    this.getCompanyNature();
  },
  methods: {
    ...mapActions(["getCompanyNature", "companySave", "getUserInfo"]),
    init() {
      this.getUserInfo().then((res) => {
        this.ruleForm.nature = this.userCompanyInfo.nature_id;
        this.ruleForm.name = this.userCompanyInfo.title;
        this.ruleForm.subTitle = this.userCompanyInfo.sub_title;
        this.ruleForm.market = this.userCompanyInfo.is_listed + "";
        this.ruleForm.needMoney = this.userCompanyInfo.is_finance + "";
        this.ruleForm.patentCount = this.userCompanyInfo.patent_count;
        this.ruleForm.workAddress = this.userCompanyInfo.work_address;
        if (this.userCompanyInfo.province) {
          this.province = this.userCompanyInfo.province;
          this.city = this.userCompanyInfo.city;
          this.area = this.userCompanyInfo.area;
          this.ruleForm.city =
            this.province + "/" + this.city + "/" + this.area;
        }
      });
    },
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let data = {
            nature_id: this.ruleForm.nature,
            title: this.ruleForm.name,
            sub_title: this.ruleForm.subTitle,
            is_listed: this.ruleForm.market,
            is_finance: this.ruleForm.needMoney,
            patent_count: this.ruleForm.patentCount,
            work_address: this.ruleForm.workAddress,
            province: this.province,
            city: this.city,
            area: this.area,
          };
          this.companySave(data).then((res) => {
            this.$message({
              message: "保存成功",
              type: "success",
            });
            this.getUserInfo();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleClose(done) {
      done();
    },
    //取消选择地区
    countermand: function () {
      this.drawer = false;
    },
    choose() {
      this.drawer = true;
    },
    onChangeProvince1: function (a) {
      this.province = a.value;
      if (a.value == "台湾省") {
        this.drawer = false;
      }
    },
    onChangeCity: function (a) {
      this.city = a.value;
    },
    onChangeArea: function (a) {
      this.area = a.value;
      this.drawer = false;
      this.ruleForm.city = this.province + "/" + this.city + "/" + this.area;
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
  },
  computed: {
    ...mapGetters(["companyNature", "userCompanyInfo"]),
  },
};
</script>

<style scoped>
.user {
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  padding: 0 0 20px 0;
}
.user >>> .el-select {
  width: 100%;
}
.user >>> .el-input__inner {
  border: none;
  width: 100%;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #999999;
  padding: 0;
}
.user >>> .el-form-item__label {
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #333333;
}
.user >>> .el-form-item {
  width: 92%;
  border-bottom: 1px solid #e6e6e6;
  margin: 8px 15px 0;
  padding-bottom: 10px;
}
.btn {
  padding: 15px;
  display: flex;
  justify-content: space-between;
}
.btn >>> .el-button {
  width: 48%;
  height: 45px;
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #fffdfd;
  border-radius: 4px;
  letter-spacing: 3px;
  border: none;
  margin-top: 28px;
}
.btn .el-button:nth-of-type(1) {
  background: #0e93e4;
}
.btn .el-button:nth-of-type(2) {
  background: #e12727;
}
/*遮罩层*/
.blacks {
  position: fixed;
  width: 100%;
  height: 60%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.45);
}
/*省市区三级联动*/
.divwrap {
  height: 50%;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 99;
}

/*外部*/
.divwrap > .distpicker-address-wrapper {
  color: #999;
  height: 100%;
}

/*头部*/
.divwrap >>> .address-header {
  color: #fff;
  width: 100%;
  position: fixed;
  bottom: 50%;
  height: 2.5rem;
  font-size: 0.2rem;
}

/*头部内容*/
.divwrap >>> .address-header ul li {
  flex-grow: 1;
  text-align: center;
}
/*内容部分*/
.divwrap >>> .address-container {
  overflow: scroll;
  height: 100%;
}
</style>